<template>
    <div style="border: 1px solid #ccc;padding: 20px;">
        <el-form-item label="特征描述">
            <el-input 
                v-model="describe"
                :autosize="{ minRows: 6, maxRows: 8 }"
                type="textarea"
            />
        </el-form-item>
        <div style="margin-top: 30px;">
            <div style="display: flex; margin-right: 10px;">
                <span style="vertical-align: top;font-size: 12px; color: #606278;">上传图片</span>
            </div>  
            <div style="display: inline-block; margin-left: 55px; margin-top: 10px;">
                <!-- 上传图片 -->
                <el-upload
                    :file-list="imgs"
                    :action="uploadImgurl"
                    list-type="picture-card"
                    :headers="headersAdmin" 
                    :on-success="handleUploadImgSuccess"
                    :on-preview="handlePictureCardPreview"
                    :on-remove="handleRemove"
                >
                    <el-icon><Plus /></el-icon>
                </el-upload>

                <el-dialog v-model="dialogVisible">
                    <el-image :src="dialogImageUrl" alt="Preview Image" />
                </el-dialog>
            </div>
        </div>
        <div style="text-align: center;"> 
            <el-button 
                type="primary"
                @click="()=>router.push({path:'/product'})">返回
            </el-button>
            <el-button 
                type="primary"
                @click="onSubmitProductFeature">
                提交
            </el-button>   
        </div>
    </div>
</template>


<script setup>
import { ref, onBeforeMount } from 'vue';
import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue'
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { featureApi, addFeaturesApi, imgDelApi, uploadImgurl } from '@/requests';
// 图片定义
const dialogImageUrl = ref('');
const dialogVisible = ref(false);
const disabled = ref(false);
const dialogVisibleFeature = ref(false);
const route = useRoute();
const router = useRouter();
const describe = ref();
const imgs = ref([]);
const subImgs = ref([]);

// 上传图片认证
const token = window.localStorage.getItem("token");
const headersAdmin = {
    Authorization: `Bearer ${token}`
};

onBeforeMount(()=>{
    getFeature();
});
// 获取特征数据
const getFeature = async ()=>{
    const res = await featureApi({"id": route.query.id});
    if (res.status === 2000){
        describe.value = res.data.describe;
        imgs.value = res.data.imgs;
        subImgs.value = res.data.imgs;
    }else{
        ElMessage.error("获取列表失败");
    }
}

const handleUploadImgSuccess = (res, uploadFile)=>{
    if (res.status === 2000){
        const data = res.data;
        subImgs.value.push({"name": data.name, "url": data.url});
        console.log(subImgs.value);
    };
}

const handleRemove = async (uploadFile, uploadFiles) => {
    // 如果 uploadFile.response 存在，则是一个刚上传的图片，如果不存在，则是本来就有的图片
    var img = null;
    if (uploadFile.response){
        img = uploadFile.response.data.name;
    }else{
        img = uploadFile.name;
    };
    if (img){
        // 发送接口删除图片
        const res = await imgDelApi({"file_name": img});
        if (res.status === 2000){
            // 从 subImgs 中删除对象
            subImgs.value = subImgs.value.filter(image => image.name != img);
            
        }else{
            ElMessage.error(res.msg);
        }
    }
}

const handlePictureCardPreview = (uploadFile) => {
    dialogImageUrl.value = uploadFile.url
    dialogVisible.value = true
}


const onSubmitProductFeature = async()=>{
    const res = await addFeaturesApi({"describe": describe.value, "imgs": JSON.stringify(subImgs.value), "id": route.query.id});
    if (res.status === 2000){
        ElMessage.success("提交成功");
        router.push({path: "/product"})
    }else{
        ElMessage.error(res.msg);
    }
}
</script>